<!doctype html>
<!--honghiepcao@Gmail.com-->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas Drag and Drop </title>
    </head>
    <body>
        <section>

            <div>
                <canvas id="canvas" width="400" height="300" style="border: 1px solid;">
                    This text is displayed if your browser does not support HTML5 Canvas.
                </canvas>
		<br/>
                <canvas id="image_croped"/>
            </div>

            <script type="text/javascript">

                var canvas;
                var ctx;
                var WIDTH = 400;
                var HEIGHT = 300;
                var xCrop=0;
                var yCrop=0;
                var dxCrop = 0;
                var dyCrop = 0;
                var imageCrop;
		var imageInput = new Image();
                imageInput.src = 'hoa_sen.jpg';

                function rect(x,y,w,h) {
                    ctx.beginPath();
                    ctx.rect(x,y,w,h);
                    ctx.closePath();
                    ctx.fill();
                }

                function clear() {
                    ctx.clearRect(0, 0, WIDTH, HEIGHT);
                }

                function init() {
                    canvas = document.getElementById("canvas");
                    ctx = canvas.getContext("2d");
                    return setInterval(draw, 20);
                }

                function draw() {
                    clear();
                    //imageInput = new Image();
                    //imageInput.src = 'aa.jpg';
                    canvas.height = imageInput.height;
                    canvas.width = imageInput.width;
                    ctx.drawImage(imageInput,0,0);
                    ctx.rect(xCrop- canvas.offsetLeft, yCrop - canvas.offsetTop , dxCrop, dyCrop);
                    ctx.fillStyle = "none";
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = 'black'; // màu đường thẳng
                    ctx.stroke();
//                    rect(xCrop- canvas.offsetLeft, yCrop - canvas.offsetTop , dxCrop, dyCrop);
                }

                function myMove(e){
                    dxCrop= e.pageX - xCrop;
                    dyCrop = e.pageY -yCrop;
                    
                }

                function myDown(e){
                    if (e.pageX > canvas.offsetLeft && e.pageY > canvas.offsetTop){
                        dxCrop=0;
                        dyCrop=0;
                        xCrop= e.pageX ;
                        yCrop = e.pageY;
                        canvas.onmousemove = myMove;                        
                    }
                    
                }

                function myUp(){
                    canvas.onmousemove = null;
                    imageCrop = ctx.getImageData(xCrop- canvas.offsetLeft, yCrop - canvas.offsetTop , dxCrop, dyCrop);
                    viewImageCroped(imageCrop);
                }
                function viewImageCroped(imageCrop){
                    var im=document.getElementById('image_croped');
                    im.height = imageCrop.height;
                    im.width = imageCrop.width;
                    im.getContext("2d").putImageData(imageCrop, 0, 0);
                }
                init();
                canvas.onmousedown = myDown;
                canvas.onmouseup = myUp;
                canvas.onmouseout = myUp;

            </script>

        </section>
    </body>
</html>
 
